<template>
   <el-card class="box-card">
    <!-- 搜索组件 -->
    <el-row type="flex" justify="space-between">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="标签名称">
          <el-input v-model="formInline.tagName" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="onEmpty">清除</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary"  @click="onAdd"><el-icon><EditPen /></el-icon>&nbsp; 新增标签</el-button>
    </el-row>
    <!-- 信息提示组件 -->
    <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        >
    </el-alert>
    <!-- 表格组件 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="80"/>
      <el-table-column prop="subjectName" label="所属学科" />
      <el-table-column prop="tagName" label="标签名称" />
      <el-table-column prop="username" label="创建者" />
      <el-table-column prop="addDate" label="创建日期" />
      <el-table-column  label="状态" >
        <template v-slot="{row}">
          {{row.state===1?'已启用':'已禁用'}}
        </template>
      </el-table-column>
      <el-table-column  label="操作">
        <template v-slot="{row}">
          <el-button type="text"  @click="onOpen(row)">{{row.state===1?'禁用':'启用'}}</el-button>
          <el-button type="text"  @click="onEdit(row)" :disabled="row.state===1">修改</el-button>
          <el-button type="text"  @click="onDel(row)" :disabled="row.state===1">删除</el-button>
        </template>
      </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <el-row type="flex" justify="end" style="margin-top:3px ;">
    <el-pagination
    background
    :page-sizes="[5, 10, 20]"
    layout="prev, pager, next,sizes,jumper"
    :total="page.total"
    @current-change="onCurrentChange"
    @size-change="onSizeChange"
  />
  </el-row>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="30%"
      @close="onClose"
      :destroy-on-close="dialogVisible"
    >
    <el-form :model="formData" ref="vForm" :rules="rules"  label-position="left" label-width="80px" size="medium"
      @submit.prevent>
      <el-form-item label="所属学科" prop="subjectID" class="required">
        <el-select v-model="formData.subjectID" class="full-width-input" clearable>
          <el-option v-for="(item, index) in subjectIDOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签名称" prop="tagName" class="required">
        <el-input v-model="formData.tagName" type="text" clearable></el-input>
      </el-form-item>
  </el-form>
      <el-row class="dialog-footer" type="flex" justify="end">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="submitForm"
          >确认</el-button
        >
      </el-row>
    </el-dialog>
  </el-card>

</template>

<script>

import { simple } from '@/api/hmmm/subjects'
import { add, changeState, detail, list, remove, update } from '@/api/hmmm/tags'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref, defineComponent, getCurrentInstance, toRefs } from 'vue'

export default {
  setup () {
    onMounted(() => {
      getList()
      getOptions()
    })
    const moment = require('moment')
    // todo 表单信息
    const formInline = reactive({
      tagName: undefined,
      state: undefined
    })
    //! 提交事件
    async function onSubmit () {
      getList()
    }
    //! 清空事件
    function onEmpty () {
      Object.assign(formInline, {
        tagName: undefined,
        state: undefined
      })
      getList()
    }
    // todo 弹出框定义
    const dialogVisible = ref(false)
    // todo title定义
    const alertText = ref('')
    // todo 分页信息定义
    const page = reactive({
      page: 1,
      pagesize: 10,
      total: 0
    })
    // todo 表格信息
    const tableData = ref([])
    // todo title 弹出层title定义
    const title = ref('')
    //!  获取标签信息列表
    const getList = async function () {
      const { data: { items, counts } } = await list({ ...page, ...formInline })
      alertText.value = `共 ${counts} 条记录`
      page.total = counts
      items.forEach(t => {
        // t.state = t.state === 1 ? '已启用' : '已禁用'
        t.addDate = moment(t.addDate).format('YYYY-MM-DD HH:mm:ss')
      })
      tableData.value = items

      // console.log(tableData)
    }
    //! 分页页面切换
    function onCurrentChange (val) {
      page.page = val
      getList()
    }
    //! 分页页面数量
    function onSizeChange (val) {
      page.pagesize = val
      getList()
    }
    //! 启用按钮/禁用按钮
    async function onOpen (row) {
      row.state = row.state === 1 ? 0 : 1
      await changeState(row)
      getList()
      ElMessage.success('操作成功')
    }
    //! 删除标签
    function onDel (row) {
      ElMessageBox.confirm(
        '此操作将永久删除该标签,是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          await remove(row)
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作成功'
          })
        })
    }
    //! 修改弹出层
    async function onEdit (row) {
      title.value = '修改标签'
      const { data } = await detail(row)
      state.formData = data
      dialogVisible.value = true
    }
    //! 新增标签
    function onAdd () {
      dialogVisible.value = true
      title.value = '新增标签'
    }
    //! 获取下拉列表
    async function getOptions () {
      const { data } = await simple()
      state.subjectIDOptions = data
    }
    // todo 弹出框数据
    const state = reactive({
      formData: {
        subjectID: '',
        tagName: ''
      },
      rules: {
        subjectID: [{
          required: true,
          message: '字段值不可为空'
        }],
        tagName: [{
          required: true,
          message: '字段值不可为空'
        }]
      },
      subjectIDOptions: []
    })
    const instance = getCurrentInstance()
    //! 提交新增/修改事件
    const submitForm = () => {
      instance.ctx.$refs.vForm.validate(async valid => {
        if (!valid) return
        if (state.formData.id) {
          await update(state.formData)
        } else {
          await add(state.formData)
        }

        ElMessage.success('提交成功')
        dialogVisible.value = false
        getList()
      })
    }
    const resetForm = () => {
      instance.ctx.$refs.vForm.resetFields()
    }
    //! 取消清空数据
    function onClose () {
      resetForm()
      dialogVisible.value = false
      Object.assign(state.formData, {
        subjectID: '',
        tagName: ''
      })
    }
    return {
      formInline,
      onSubmit,
      tableData,
      getList,
      alertText,
      page,
      onCurrentChange,
      onSizeChange,
      onEmpty,
      onDel,
      dialogVisible,
      ...toRefs(state),
      submitForm,
      resetForm,
      onAdd,
      onEdit,
      getOptions,
      onClose,
      title,
      onOpen
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-overlay-dialog {
    top: 105px;
}
.el-select{
  width: 100%;
}

::v-deep .el-input--suffix{
  margin-left: 20px;
}
</style>
